<div class="comp-menu">
    <div class="coins-tab">
        <div class="coins-tab-left">
            <div class="m-tab">
                <ul class="list fn-clearfix">
                    <li class="item" v-for="(item, $key) in symbolConfig.MARKET_TABS">
                        <a class="item-link"
                           :class="{'item-link--active': isActive === item.LABEL}"
                           @click="changeType($key)">{{ $t('common.' + item.LABEL + '_Exchange') }}</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="coins-tab-right fn-clearfix">
            <input class="search-input" v-model="keyCoin" />
            <i class="icon icon-search"></i>
        </div>
    </div>
    <ul class="menu fn-clearfix">
        <li class="item" v-for="(item, $index) in currentCoins"
            v-if="currentCoins.length > 0">
            <a :href="item.page" class="item-link"
               @click="goPage(item.symbol)"
               v-if="keyCoin === '' || item.symbol.indexOf(keyCoin.toUpperCase())>=0">
                <span class="text text-coin">{{item.assetCode2 + '/' + item.assetCode1}}</span>
                <span class="text text-price">{{ item.price }}</span>
                <span class="text text-radio" :class="{'text-green':+item.changeRatio > 0,'text-red':+item.changeRatio < 0,'fn-white':+item.changeRatio==0}">
                    {{ item.changeRatio }}
                    <span class="suffix">%</span>
                    <span class="icon" :class="{'icon-price-up':+item.changeRatio > 0,'icon-price-down':+item.changeRatio < 0}"></span>
                    <span style="padding-left: 18px" v-if="+item.changeRatio === 0"></span>
                </span>
            </a>
        </li>
    </ul>
</div>